<template>
  <div class="vpt-chart"
       ref="baseEchartRef"
       :style="{ ...echartStyle }"></div>
  <section class="vpt-base-template">
    <div class="vpt-base-tpml-item"
         v-for="item in entity.list">
      <label>{{ item.label }}</label>
      <div>{{ item.value }} {{ item.unit }}</div>
    </div>
  </section>
</template>
<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { fontSize } from "@/utils/rem/rem.js";
import { throttle } from "@/utils/throttle";

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer,
  PieChart
]);

const baseEchartRef = ref(null);

const props = defineProps({
  entity: { type: Object, default: () => ({}) },
  width: { type: String, default: "100%" },
  height: { type: String, default: "2.2rem" },
  // 标题字号
  titleFontSize: { type: Number, default: 20 },
  // 总数字号
  totalFontSize: { type: Number, default: 50 },
  // 标题配置项
  titleProps: { type: Object, default: () => ({}) }
});

let baseChart = null;
const chartOption = ref({});

const echartStyle = computed(() => {
  const { width, height } = props;
  const reg = /%$/;
  return {
    width: reg.test(width) ? width : `${width}`,
    height: reg.test(height) ? height : `${height}`,
  };
});

const chartData = computed(() => {
  return [
    { value: props.entity.percentageValue, name: 'percentageValue' },
    { value: props.entity.percentageDrag, name: 'percentageDrag' },

  ]
})

watch(() => props.entity, () => {
  nextTick(() => {
    getOption();
    initChart();
  })
}, { deep: true })

const initChart = () => {
  if (!baseChart) {
    baseChart = echarts.init(baseEchartRef.value);
    randerChart();
    window.addEventListener('resize', () => {
      setTimeout(() => {
        baseChart.resize();
        throttle(getOption, 500)()
        randerChart();
      }, 100)
    })
  }
};

const randerChart = () => {
  baseChart.setOption(chartOption.value, true);
}

function getOption () {
  chartOption.value = {
    title: {
      text: "{name|" + props.entity.name + "}\n{val|" + props.entity.percentageValue + "%}",
      left: '48%',
      top: '24%',
      textAlign: "center",
      textStyle: {
        color: '#fff',
        fontWeight: 400,
        height: fontSize(30),
        // fontFamily: "HarmonyOS_SansSC_Medium",
        rich: {
          name: {
            fontSize: fontSize(props.titleFontSize),
            fontWeight: "400",
            color: "#ffffffb3",
            padding: [10, 0],
          },
          val: {
            fontSize: fontSize(props.totalFontSize),
            padding: [0, 0, 0, 4],
            // fontWeight: 700,
            color: props.entity.centerFontColor
          },
        },
      },
      ...props.titleProps
    },
    tooltip: {
      show: false,
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      show: false,
    },
    series: [
      {
        name: props.entity.name,
        center: ['50%', '50%'],
        type: 'pie',
        radius: ['70%', '90%'],
        selectedMode: false,
        hoverAnimation: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false
          }
        },
        labelLine: {
          show: false
        },
        data: chartData.value,
        color: props.entity.percentageColor
        // color: ['#00B675', '#1e3651']
      }
    ]
  }
}




</script>
<style lang="less" scoped>
.vpt-chart {
  margin: 0.25rem 0;
}

.vpt-base-template {
  .vpt-base-tpml-item {
    font-size: 0.26rem;
    color: #ffffffb3;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.08rem;

    label {
      color: #ffffffb3;
      letter-spacing: 0;
    }
  }
}
</style>